import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'dva';
import { Form, Button, Modal, Input, Tag, Icon } from 'antd';
import Standards from './Standards';
import style from './index.css';
const Sku: React.FC<any> = ({ form, dataSource = {} }) => {

    const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 14 },
    }

    const { getFieldDecorator } = form;

    const [curStandards, setCurStandards] = useState([]);
    // 参数配置回调
    const handleStandardsSuccess = (result) => {
        setCurStandards(curStandards.concat(result));
    }

    const handleEditStandardsSuccess = (result, type, index) => {
        if (type === 'edit') {
            let _curStandards = curStandards.concat([]);
            //@ts-ignore
            _curStandards.splice(index, 1, result);
            setCurStandards(_curStandards);
        }
    }


    return (
        <div className={style.sku}>
            <Form>
                <Form.Item {...formItemLayout} label={'规格参数'}>
                    {
                        getFieldDecorator('price', {
                            initialValue: dataSource.price,
                            rules: [{ required: true, message: '请输入规格参数' }],
                        })(
                            <>
                                {
                                    curStandards!.map((standard: any, index: number) => <div key={`standard-unit-${index}`} className={style['standard-unit']}>
                                        <label>{standard.name}</label>
                                        <div className={style['standard-item-desc']}>{
                                            standard.tags!.map((tag: string, index: number) => <Tag key={tag}><span>{tag}</span></Tag>)
                                        }</div>
                                        <Standards type={'edit'} dataSource={standard} index={index} onSuccess={handleEditStandardsSuccess} />
                                    </div>)
                                }
                                <Standards type={'add'} onSuccess={handleStandardsSuccess} />
                            </>
                        )
                    }
                </Form.Item>
                <Form.Item {...formItemLayout} label={'规格价格'}>
                    {
                        getFieldDecorator('price', {
                            initialValue: dataSource.price,
                            rules: [{ required: true, message: '请输入规格名称' }],
                        })(<Input className={style.w220} placeholder={'请输入规格名称'} />)
                    }
                </Form.Item>
            </Form>
        </div>
    );
}
const WrappedSku = Form.create<any>({ name: 'modalForm' })(Sku);
export default connect((state: any) => {
    return { }
})(WrappedSku);
